<template>
  <view style="display: flex; flex-wrap: wrap">
    <view v-for="(item, index) in imageList" :key="index" style="position: relative; width: 198rpx; height: 198rpx; display: inline-block">
      <image :src="item.path" class="imageitem" mode=""></image>
      <view class="del" @click="delimage(index)">
        <uni-icons type="closeempty" color="#fff" size="10"></uni-icons>
      </view>
    </view>
    <view class="upload" @click="openablum">
      <uni-icons type="plusempty" color="#999999" size="30" style="margin-left: 50rpx; margin-bottom: 20rpx"></uni-icons>
      <view style="text-align: center; font-size: 24rpx; color: #999999">上传图片</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: []
    };
  },
  methods: {
    // 打开相册
    openablum() {
      if (this.imageList.length >= 9) {
        return uni.showToast({
          title: '上传的图片数量已上限',
          icon: 'none'
        });
      }
      uni.chooseImage({
        count: 9,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        camera: 'front',
        success: (res) => {
          console.log('-------', res);
          this.imageList.push(...res.tempFiles);
          console.log('------------------------', this.imageList);
          // 选择玩之后调用上传图片方法
          uni.uploadFile({
            url: '',
            files: [],
            fileType: 'image',
            success: (res2) => {
              console.log('上传完成时的回调---', res2);
            }
          });
        }
      });
    },
    // 删除图片
    delimage(index) {
      console.log(index);
      this.imageList.splice(index, 1);
    }
  }
};
</script>

<style lang="less">
.upload {
  box-sizing: border-box;
  display: inline-block;
  width: 160rpx;
  height: 160rpx;
  background: #f8f8f8;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  padding-top: 30rpx;
}
.imageitem {
  box-sizing: border-box;
  width: 160rpx;
  height: 160rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.del {
  box-sizing: border-box;
  position: absolute;
  right: 15rpx;
  top: -15rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 35rpx;
  background-color: red;
}
</style>
